<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Example: Autoreload DataTable - Basic Table (YUI Library)</title>
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/reset/reset.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">
		<style type="text/css">
			/* custom css*/
			#elDataTable {margin:1em;}
			#elDataTable table {border-collapse:collapse;}
			#elDataTable th, #basic td {border:1px solid #000;padding:.25em;}
			#elDataTable th {background-color:#696969;color:#fff;} /*dark gray*/
			#elDataTable .yui-dt-odd {background-color:#eee;} /*light gray*/
			#elDataTable em {font-style:italic;}
			#elDataTable strong {font-weight:bold;}
			#elDataTable .big {font-size:136%;}
			#elDataTable .small {font-size:77%}
		</style>
        <script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <!-- script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script -->
        <!-- script src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js"></script -->
        <script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
        <script src="http://yui.yahooapis.com/2.2.2/build/datatable/datatable-beta-min.js"></script>
	</head>
	<body>
        
        <p>
            This example autoreloads the DataTable to test resource utilization.
        </p>
        
        <ul>
            <li>
                <a href="http://tech.groups.yahoo.com/group/ydn-javascript/message/13570" target="_blank">Effective way to deallocate datatable?</a>
            </li>
            <li>
                <a href="http://tech.groups.yahoo.com/group/ydn-javascript/message/13635" target="_blank">Datatable Memory Consumption with IE</a>
            </li>
        <ul>

    	<div id="elDataTable"></div>
		
		<div id="elScripts">	
			<script type="text/javascript">
				YAHOO.example.Data = {};
				YAHOO.example.Data.bookorders = [
				    {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
				    {id:"po-0297", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
				    {id:"po-0783", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
				    {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"}
				];      
				
				// oLogger = new YAHOO.widget.LogReader();
                
                nCount = 0;

                function buildDataTable() {
                    
                    // YAHOO.log("Loading DataTable ...");

                   oColumnHeaders = [
                        {key:"id", sortable:true, resizeable:true},
                        {key:"date", type:"date", sortable:true, resizeable:true},
                        {key:"quantity", type:"number", sortable:true, resizeable:true},
                        {key:"amount", type:"currency", sortable:true, resizeable:true},
                        {key:"title", type:"html", sortable:true, resizeable:true}
                    ];		
    
                    oColumnSet = new YAHOO.widget.ColumnSet(oColumnHeaders);
            
                    oDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
                    oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                    oDataSource.responseSchema = {
                        fields: ["id","date","quantity","amount","title"]
                    };
                    
                    oDataTable = new YAHOO.widget.DataTable("elDataTable", oColumnSet, oDataSource,{caption:"Example: Basic Table " + nCount++});
                    
                    timerID = setTimeout("buildDataTable()", 100); // reload
                }

                timerID = setTimeout("buildDataTable()", 100); // bootstrap
			</script>
		</div>
	</body>
</html>
